<template>
    <div>
        <el-dialog v-model="dialogVisible" title="编辑项目" width="500px">
            <div>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="项目信息" name="projectInfo">
                        <el-form ref="formRef1" :model="projectData" label-width="100px" :rules="projectRules">
                            <el-form-item v-for="(i, index) in projectData" :key="index" :label="i.name"
                                :prop="`${i.prop}.value`">
                                <el-input v-if="i.type === 'input'" v-model="i.value" :type="i.type || 'text'"
                                    :placeholder="i.placeholder || '请输入'" />
                                <el-select class="w-full" v-if="i.type === 'select'" v-model="i.value"
                                    :multiple="i.multiple" placeholder="请选择">
                                    <el-option v-for="item in i.options" :key="item[i.defaultAttrs.value]"
                                        :label="item[i.defaultAttrs.label]" :value="item[i.defaultAttrs.value]" />
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="考勤信息" name="attendanceInfo">
                        <el-form ref="formRef2" :model="attendanceData" label-width="100px" :rules="attendanceRules">
                            <el-form-item v-for="(i, index) in attendanceData" :key="index" :label="i.name"
                                :prop="`${i.prop}.value`">
                                <el-radio-group v-if="i.type === 'radio'" v-model="i.value" class="ml-4">
                                    <el-radio v-for="(item, index) in i.options" :key="index" :label="item.value">{{
                                        item.label }}</el-radio>
                                </el-radio-group>
                                <el-select class="w-full" v-if="i.type === 'select'" v-model="i.value"
                                    :multiple="i.multiple" placeholder="请选择">
                                    <el-option v-for="item in i.options" :key="item[i.defaultAttrs.value]"
                                        :label="item[i.defaultAttrs.label]" :value="item[i.defaultAttrs.value]" />
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">
                        保存
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            dialogVisible: false,
            activeName: 'projectInfo',
            projectData: {
                companyName: {
                    prop: 'companyName',
                    name: '派遣单位',
                    disabled: true,
                    type: 'input',
                    value: ''
                },
                projectName: {
                    prop: 'projectName',
                    name: '项目名称',
                    disabled: false,
                    type: 'input',
                    value: ''
                },
                admin: {
                    prop: 'admin',
                    name: '管理员',
                    disabled: false,
                    type: 'select',
                    multiple: true,
                    value: [],
                    options: [
                        {
                            label: 1,
                            value: 1
                        },
                        {
                            label: 2,
                            value: 2
                        },
                    ],
                    defaultAttrs: {
                        label: 'label',
                        value: 'value'
                    }
                },
            },
            projectRules: {
                'companyName.value': [
                    {
                        required: true,
                        message: '请输入派遣单位',
                        trigger: 'blur'
                    }
                ],
                'projectName.value': [
                    {
                        required: true,
                        message: '请输入项目名称',
                        trigger: 'blur'
                    }
                ],
                'admin.value': [
                    {
                        required: true,
                        message: '请选择负责人',
                        trigger: 'change'
                    }
                ],
            },
            attendanceData: {
                order: {
                    prop: 'order',
                    name: '排班方式',
                    disabled: true,
                    type: 'radio',
                    value: '',
                    options: [
                        {
                            label: '白班',
                            value: 1
                        },
                        {
                            label: '夜班',
                            value: 2
                        },
                    ]
                },
                ageLimit: {
                    prop: 'ageLimit',
                    name: '年龄限制',
                    disabled: false,
                    type: 'select',
                    multiple: false,
                    value: '',
                    options: [
                        {
                            label: 18,
                            value: 18
                        }
                    ],
                    defaultAttrs: {
                        label: 'label',
                        value: 'value'
                    }
                },
            },
            attendanceRules: {
                'order.value': [
                    {
                        required: true,
                        message: '请选择排班方式',
                        trigger: 'change'
                    }
                ],
                'ageLimit.value': [
                    {
                        required: true,
                        message: '请选择年龄限制',
                        trigger: 'change'
                    }
                ],
            },
        }
    },
    watch: {
        show: {
            handler(newval: boolean) {
                this.dialogVisible = newval
            },
            immediate: true
        },
        dialogVisible(newval: boolean) {
            this.$emit('update:show', newval)
        }
    },
    methods: {
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        handleClick () {

        },
        submit () {
            if (this.activeName === 'projectInfo') {
                (this.$refs.formRef1 as any).validate((valid: any) => {
                    if (valid) {
                        console.log('1submit!')
                    } else {
                        console.log('1error submit!')
                        return false
                    }
                })
            } else if (this.activeName === 'attendanceInfo') {
                (this.$refs.formRef2 as any).validate((valid: any) => {
                    if (valid) {
                        console.log('2submit!')
                    } else {
                        console.log('2error submit!')
                        return false
                    }
                })
            }
        }
    }
})
</script>

<style scoped lang="stylus">

</style>
